<template>
	<div class="login-bg" :style="'background-image:url(' + enterpriseBgImg + ');'">
		<el-form :model="ruleForm" :rules="rules" ref="formRef" label-position="left" label-width="0px"
			class="demo-ruleForm login-container d-b-c">
			<div class="log_img">
				<img :src="left_url" />
			</div>
			<div class="flex-1 login-box">
				<h3 class="title" style="margin-bottom: 20px">{{ enterpriseName }}</h3>

				<!--用户名-->
				<el-form-item prop="username">
					<div class="left-img-input">
						<img class="l-img" src="/src/assets/img/user.png" />
						<el-input @keyup.enter.native="gotoLogin" type="text" v-model="ruleForm.username"
							auto-complete="off" placeholder="账号"></el-input>
					</div>
				</el-form-item>
				<!--密码-->
				<el-form-item prop="password">
					<div class="left-img-input">
						<img class="l-img" src="/src/assets/img/password.png" />
						<el-input @keyup.enter.native="gotoLogin" show-password type="password"
							v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
					</div>
				</el-form-item>
				<el-form-item prop="code" style="line-height:0px;" v-if="codeImage">
					<div class="d-b-c">
						<div class="left-img-input" style="width: auto;margin-bottom: 0;">
							<el-input v-model="ruleForm.code" ref="code" placeholder="验证码" class="l-input"
								style="width:170px;"></el-input>
						</div>
						<div class="identifybox" style="height: 48px; flex-shrink: 0;" @click="getData">
							<el-image class="codeImage" style="width: 150px; height: 48px" :src="codeImage" />
						</div>
					</div>
				</el-form-item>
				<!--登录-->
				<el-form-item><el-button type="primary" class="logins" @click.native.prevent="gotoLogin"
						:loading="logining">登录</el-button></el-form-item>
			</div>
		</el-form>
	</div>
</template>
<script>
	import bgimg from "/static/imgs/login_bg.png";
	import leftimg from "/static/imgs/login.png";
	import {
		reactive,
		toRefs,
		defineComponent,
		onMounted,
		inject
	} from 'vue';
	import {
		base
	} from '@/api/index.js';
	import {
		useUserStore
	} from '@/store';
	import {
		useRouter
	} from 'vue-router';
	export default defineComponent({
		components: {},
		setup() {
			const getImgSrc = inject('$getImgSrc')
			const router = useRouter();
			const {
				afterLogin
			} = useUserStore();
			const state = reactive({
				enterpriseName: '',
				enterpriseBgImg: bgimg,
				left_url: leftimg,
				codeImage: "",
				formRef: null,
				ruleForm: {
					username: '',
					password: '',
					code: '',
					codeKey: '',
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					/*验证码*/
					code: [{
						required: true,
						message: "请输入验证码",
						trigger: "blur",
					}, ]
				},
			});
			onMounted(() => {
				fetchData();

			});
			const fetchData = async () => {
				const {
					data: {
						settings: {
							shop_bg_img,
							shop_name,
							shop_logo_img
						},
						codeData: {
							codeImage,
							codeKey
						}
					}
				} = await base();
				if (shop_name) state.enterpriseName = shop_name;
				if (shop_bg_img) state.enterpriseBgImg = shop_bg_img;
				if (shop_logo_img) state.left_url = shop_logo_img;
				if (codeImage) state.codeImage = codeImage;
				if (codeKey) state.ruleForm.codeKey = codeKey;
			};
			return {
				...toRefs(state),
				fetchData,
				getImgSrc,
				afterLogin,
				router,
			};
		},
		methods: {
			async getData() {
				this.fetchData();
			},
			async gotoLogin() {
				this.formRef.validate(async (valid) => {
					if (valid) {
						if (this.codeImage) {
							this.fetchData();
						}
						await this.afterLogin(this.ruleForm);
						this.router.push('/home');
					}
				});
			},
		},
	});
</script>
<style lang="scss" scoped>
	::v-deep .el-input__wrapper {
		box-shadow: none !important;
	}

	.logins {
		width: 100%;
		height: 44px;
		background: #409eff;
		border-radius: 5px;
		margin-top: 20px;
	}

	.login-bg {
		width: 100%;
		height: 100%;
		background-size: cover;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.login-container {
		box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.1), 0 1px 0px 0 rgba(0, 0, 0, 0.04);
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-moz-border-radius: 10px;
		background-clip: padding-box;
		position: fixed;
		width: 896px;
		height: 408px;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		background-color: #ffffff;

		.title {
			margin: 0px auto 40px auto;
			text-align: center;
			font-size: 28px;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #333333;
		}

		.remember {
			margin: 0px 0px 35px 0px;
		}
	}

	.log_img {
		img {
			width: auto;
			height: 408px;
			border-radius: 10px 0 0 10px;
			display: block;
			/* 避免行内元素特有的空白间隙问题 */
			max-height: 100%;

		}
	}

	.login-box {
		padding: 45px 39px 31px 39px;
		height: 408px;
		box-sizing: border-box;
	}

	.left-img-input {
		width: 370px;
		height: 44px;
		line-height: 44px;
		background: #ffffff;
		border-radius: 5px;
		border: 1px solid #eeeeee;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 14px;
		// margin-bottom: 10px;

		.l-img {
			width: 20px;
			height: 20px;
			margin-right: 10px;
			flex-shrink: 0;
		}

		.l-input {
			flex: 1;
			border: none;
			background: none;
			font-size: 14px;
			color: #666666;
		}

		.el-input__inner {
			border: none;
			padding: 0;
		}
	}

	.codeImage {
		cursor: pointer;
		margin-left: 20px;
	}
</style>